h1 {color: green;}
h3 {background-color: #ccc;border-radius: 0.5em; }
html {box-sizing: border-box;}
*, ::before, ::after {box-sizing: inherit;}

body {
        height:100%;
        display: flex;
        flex-flow: row wrap;
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

header
{
        border-radius: 0px 0.5em 0.5em;
        border: 1px white;
        padding: 10px;
        margin: 10px;
        flex: 1 100%;
}

nav,
nav a,
article,
section,
aside,
footer,
main {
        border-radius: 0px 0.5em 0.5em;
        border: 1px solid;
        padding: 10px;
        margin: 10px;
        flex: 1 100%;
}

header {
        background: #white;
        border-color: #white;
        display: flex;
        flex-flow: row wrap;
}

header * {
        flex: 1 1 0%;
}

header img {
        flex: 0 0 350px;
        margin-right: 20px;
}

header nav {
        flex: 1 1 100%;
}

img {
        width: max(200px, min(20%, 100px));
        padding: min(5vh, 1em) min(5vw, 2em);
}






nav,
nav ul,
nav li {
        margin: 0;
        padding: 0.5em;
        border: none;

}

nav ul {
        display: flex;
        justify-content: space-around;
        flex-direction:column;
}

nav li {
        list-style-type: none;
        margin: 1.3em 0;
        flex: 1 1 100%;

}

nav a {
        display: inline-block;
        font-weight: bold;
        width: 95%;
        background: #ccc;
        color: #333;
        border: 1px solid #black;
        margin: 0;
        text-decoration: none;
        text-align: center;
}

nav a:hover,
nav a:focus {
  color: #fffbf0;
  background-color: #ccc;
}

section {
        background: #F1F3F4;
        border-color: slateblue;
}

article {
        background: #white;
        border-color: none;
}

aside {
        background: #white;
        border-color: #white;
}



footer {
        background: #white;
        border-color: #8a9da8;
        display: flex;
        flex-flow: row wrap;



}


footer {
        position: fixed;
        padding: 10px;
        bottom: 0;
        left: 0;
        right: 0;
        background: #white;
        border-color: #8a9da8;
        display: flex;
        flex-flow: row wrap;
}

footer * {
        flex: 1 1 0%;
        justify-content: space-between;
}

footer p {
        text-align: right;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */

@media all and (min-width: 35em) {
        header img {
                margin-right: 50px;
        }
        nav ul {
                flex-direction: column;
        }
        nav li {
                margin: 0 10px;
                flex: 1 1 0%;
        }
        article {
                order: 2;
        }
        #news {
                order: 3;
        }
        aside {
                /* durch auto werden die beiden asides in eine Zeile gesetzt */

                flex: 1 1 auto;
                order: 4;
        }
        footer {
                order: 5;
        }
}
/* Large screens */

@media all and (min-width: 50em) {
        article {
                /* Der Article wird 2.5x so breit wie die beiden asides! */

                order: 3;
                flex: 6 1 0%;
        }
        aside {
                flex: 2 1 0%;
        }
          #news {
                order: 2;


        }

}

article img.rechts {
        float: right;
        margin: 0 0 0.5em 0.5em;
}

section img.rechts {
        float: right;
        margin: 0 0 0.5em 0.5em;
}